<template>
  <view class="component">
    <view class="title" @click="onChangeActive">
      <slot></slot>
      <view class="title-icon" v-if="[1,2].includes(arrowColor)">
        <!--白色-->
        <template v-if="arrowColor===1">
          <image src="/@/static/images/xiala-anxia-shense.png" v-if="dropdownActive"></image>
          <image src="/@/static/images/xiala-shense.png" v-else></image>
        </template>
        <!--黑色-->
        <template v-if="arrowColor===2">
          <image src="/@/static/images/xiala-anxia.png" v-if="dropdownActive"></image>
          <image src="/@/static/images/xiala.png" v-else></image>
        </template>
      </view>

      <view class="dropdown" v-if="dropdownActive">
        <view class="dropdown-list">
          <view @click="onChooseItem(item)" class="dropdown-list-item"
                :class="item.value===value?'dropdown-list-item-active':''"
                v-for="item in list" :key="item.value">
            <view class="dropdown-icon" v-if="item.status">
              <image src="/@/static/images/online.png" v-if="item.status===1"/>
              <image src="/@/static/images/offline.png" v-else-if="item.status===2"/>
              <image src="/@/static/images/fault.png" v-else/>
            </view>
            {{ item.label }}
          </view>
        </view>
      </view>
    </view>
    <view class="dropdown-cover" v-if="dropdownActive" @click="onCloseDropdown"></view>
  </view>
</template>

<script setup>
import {onLoad} from "@dcloudio/uni-app";
import {ref} from "vue"

defineProps({
  arrowColor: {
    type: Number,
    default: 1 //1 白色 2黑色 3#2F6BFF
  },
  value: {
    type: [String, Number],
    default: ''
  },
  customValue: {
    type: Boolean,
    default: false
  },
  list: {
    type: Array,
    default: () => {
      return [] //[{label:'',value:''}]
    }
  }
})

const emits = defineEmits(['select', 'changeStatus', 'close'])

const dropdownActive = ref(false)

onLoad(() => {
})

const onChangeActive = () => {
  dropdownActive.value = !dropdownActive.value
  emits('changeStatus', dropdownActive.value)
}

const onCloseDropdown = () => {
  console.log(21)
  dropdownActive.value = false
}

const onChooseItem = (e) => {
  emits('select', e)
}
</script>

<style lang="scss" scoped>
@import "dropdown";
</style>
